<!DOCTYPE html>
<html>
<head>
<!--
	Copyright (c) 2015-2018 Jean-Marc VIGLINO, 
	released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
	<title>ol-ext: IGN Géoservices</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<meta name="description" content="Geoportail layer for ol" />
	<meta name="keywords" content="ol, openlayers, layer, source, geoportail" />

	<!-- jQuery -->
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

	<!-- Openlayers -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
	<script src="/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
	
	<!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>
  <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
  <script src="https://unpkg.com/elm-pep"></script>

  <!-- filesaver-js -->
	<script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/aa9f4e0e/FileSaver.min.js"></script>

	<link rel="stylesheet" href="../style.css" />
  <style>
    h1 {
      white-space: nowrap;
    }
    #nb {
      margin-left: .5em;
      font-weight: bold;
      color: #369;
    }
    #top {
      position: fixed;
      background: #fff;
      z-index: 1;
      top: 0;
      left: 0;
      right: 0;
      box-shadow: 0 0 10px;
      padding-bottom: .5em;
    }
    #top p {
      margin: .5em 0 0;
    }
    input[type="search"] {
      font-size: 1em;
      margin-left: 1em;
      width: 10em;
    }
    #code textarea {
      margin: 0;
      background: no-repeat;
      border: 0;
      overflow: hidden;
      width: 100%;
      white-space: nowrap;
      font-size: 1em;
      min-height: 3.5em;
      max-height: 3.5em;
      min-width: 100%;
      max-width: 100%;
      padding: 0;
    }
    .info {
      margin: 0;
    }
    ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    ul.collapsed {
      display: none;
    }
    #geoportail {
      margin-top: 11em;
    }
    #geoportail > li > p {
      background-color: #369;
      color: #fff;
      padding: .5em 1em;
      text-transform: capitalize;
      font-size: 1.1em;
      font-weight: bold;
      cursor: pointer;
      opacity: .9;
    }
    #geoportail > li > p:hover {
      opacity: 1;
    }
    #geoportail p {
      margin: 0;
    }
    #geoportail img {
      height: 150px;
      display: block;
      margin: auto;
    }
    #geoportail ul li {
      position: relative;
      display: inline-block;
      width: 300px;
      text-align: center;
      overflow: hidden;
      padding: .5em;
      cursor: pointer;
    }
    #geoportail .desc {
      display: none;
      position: absolute;
      top: 30%;
      left: 50%;
      width: 100%;
      max-height: 100%;
      transform: translate(-50%, -30%);
      padding: .5em;
      background-color: rgba(255,255,255,.5);
      cursor: pointer;
    }
    #geoportail ul li:hover .desc {
      display: block;
    }
    ul.choice li {
      display: inline-block;
      padding: 0 .5em;
      background-color: #aaa;
      color: #fff;
      border-radius: .5em .5em 0 0;
      margin: .1em .2em 0;
      cursor: pointer;
    }
    ul.choice li.select {
      background-color: #369;
    }
  </style>
</head>
<body >
	<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

  <div id="top">
    <a href="../../index.html">
      <h1>ol-ext: IGN Géoservices</h1>
    </a>
    <ul class="choice">
      <li class="select" onclick="code(this, 'js5')">
        code
      </li><li onclick="code(this, 'es6')">
        ES6
      </li>
    </ul>
    <div class="info">
      <div id="code">
        <textarea class="js5"></textarea>
        <textarea class="es6" style="display: none;"></textarea>
      </div>
    </div>
    <button type="button" style="float: right;" onclick="copy();">Copy</button>
    <input id="search" type="search" placeholder="rechercher..." /><span id="nb"></span>
  </div>

	<!-- DIV pour la carte -->
  <ul id="geoportail"></ul>
	
<script type="text/javascript">

/*
var services = [
  'administratif',
  'agriculture',
  'altimetrie',
  'cartes',
  'cartovecto',
  'clc',
  'economie',
  'environnement',
  'ortho',
  'orthohisto',
  'satellite',
  'sol',
  'parcellaire',
  'topographie',
  'transports',
  'divers'
];
*/

var ul = $('#geoportail')
ol.layer.Geoportail.getCapabilities().then(function(caps, themes) {
  // Sort but "autre"
  function sort(a, b) {
    if (a === 'autre') return 1;
    if (b === 'autre') return -1;
    return a<b ? -1 : a>b ? 1 : 0
  }
  // Sort by theme
  Object.keys(themes).sort(sort).forEach(function(k) {
    var li = $('<li>').appendTo(ul);
    $('<p>').text(k)
      .click(function(e) {
        e.target.nextSibling.classList.toggle('collapsed')
      })
      .appendTo(li)
    var ul2 = $('<ul>').appendTo(li);
    Object.keys(themes[k]).forEach(function(c) {
      var cap = themes[k][c]
      ol.layer.Geoportail.register(c, cap);
      var l = new ol.layer.Geoportail({ layer: c });
      var li = $('<li>')
        .click(function() {
          $('#code .js5').text(
            'ol.layer.Geoportail.register('
            + '"' + c + '", '
            + JSON.stringify(cap)
            + ');\n'
            + 'var layer = new ol.layer.Geoportail({ layer: \''+c+'\' });'
          );
          $('#code .es6').text(
            'import Geoportail from \'ol-ext/layer/Geoportail\';\n'
            + 'Geoportail.register("' + c + '", '
            + JSON.stringify(cap)
            + ');\n'
            + 'const layer = new Geoportail({ layer: \''+c+'\' });'
          );
        })
        .appendTo(ul2);
      $('<img>').attr('src', l.getPreview()[0]).appendTo(li);
      $('<p>').text(cap.title).appendTo(li);
      $('<p>').text(c).appendTo(li);
      $('<p class="desc">').html(cap.desc).appendTo(li);
    })
    $('#nb').text($('#geoportail ul li:visible').length)
  })
});


function code(elt, type) {
  $('.choice li').removeClass('select');
  $(elt).addClass('select');
  $('#code textarea').hide();
  $('#code textarea.'+type).show();
}
function copy() {
  $("#code textarea:visible").select();
  document.execCommand('copy');
  $("#code textarea:visible").blur();
}

$('#search').on('keyup blur change search', function () {
  var st = $('#search').val();
  var reg = new RegExp(st,'i');
  $('#geoportail ul li').each(function() {
    if (reg.test($(this).text())) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
  $('#nb').text($('#geoportail ul li:visible').length);
});

</script>
</body>
</html>